import hyRequest from '@/service'
import React, { memo, useEffect } from 'react'
import type { FC, ReactNode } from 'react'

interface IProps {
  children?: ReactNode
}

interface IBanner {
  imageUrl: string
  targetId: number
  targetType: number
  titleColor: string
  typeTitle: string
  url: string
  exclusive: boolean
  scm: string
  bannerBizType: string
}

const Recommend: FC<IProps> = () => {
  const [banners, setBanners] = React.useState<IBanner[]>([])

  useEffect(() => {
    hyRequest
      .get({
        url: '/banner'
      })
      .then((res) => {
        console.log(res)
        setBanners(res.banners)
      })
  }, [])

  return (
    <div>
      Recommend
      <ul>
        {banners.map((item, idx) => (
          <li key={idx}>
            <a href={item.url}>
              <img src={item.imageUrl} alt="" />
              <span>{item.typeTitle}</span>
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default memo(Recommend)
